<template>

  <div>
    <div>
      <div style="margin: 50px 0 ;text-align: center;font-size: 20px">
        Retrieve password
      </div>
      <div>
        <div  class="show-min-576px">
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 100%;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;width: 100%;height: 40px;" v-model="info.mail" placeholder="Please input your email"/>
              </span>
            </div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <SafetyCertificateOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;max-width: 100%;height: 40px;" type="password" v-model="info.code" placeholder="Please input code"/>
              </span>
              <basic-button :inverse-color="true">
                <span style="white-space:nowrap;" @click="toSendCode">Send Code</span>
              </basic-button>
            </div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;max-width: 100%;height: 40px;" type="password" v-model="info.changedPassword" placeholder="Please input new password"/>
              </span>
            </div>
          </div>
        </div>
        <div class="show-max-576px">
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 100%;">
              <span style="width: 34px!important;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input  style="box-sizing: border-box;width: 100%;" v-model="info.mail" placeholder="Please input your email"/>
              </span>
            </div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 34px!important;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <SafetyCertificateOutlined style="font-size: 20px"/>
              </span>
              <div  style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 1 1 calc(100% - 34px);">
              <span style="flex: 1 1 auto">
                <basic-input style="box-sizing: border-box;max-width: 100%;" type="password" v-model="info.code" placeholder="Please input code"/>
              </span>
                <basic-button :inverse-color="true" style="height:36px;">
                  <span style="white-space:nowrap;" @click="toSendCode">Send Code</span>
                </basic-button>
              </div>
            </div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 34px;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input style="box-sizing: border-box;max-width: 100%;" type="password" v-model="info.changedPassword" placeholder="Please input new password"/>
              </span>
            </div>
          </div>
        </div>
      </div>
      <basic-button @click="toFindPassword" style="box-sizing: border-box;width: 100%" :inverse-color="true">
        <div style="text-align: center;font-size: 16px;">
          Submit
        </div>
      </basic-button>
      <basic-button @click="toRoute('/auth/login')" style="box-sizing: border-box;width: 100%;border: 1px solid #1677ff ;margin-top: 10px" >
        <div style="text-align: center;font-size: 16px;">
          Remember the password?
        </div>
      </basic-button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {register, resetPassword, sendForgetPasswordMail, sendRegisterMail} from "../../api/UserActionRequest";
import {notification} from "ant-design-vue";
import BasicButton from "../../components/button/basicButton.vue";
import {
  ArrowRightOutlined,
  LockOutlined,
  MailOutlined,
  SafetyCertificateOutlined,
  UserOutlined
} from "@ant-design/icons-vue";

export default defineComponent({
  components: {
    MailOutlined, LockOutlined, UserOutlined, ArrowRightOutlined,SafetyCertificateOutlined
  },
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();



    const info = reactive({
      mail: '',
      changedPassword: '',
      code:''
    })

    const toFindPassword = () => {
      resetPassword(info).then(async (res) => {
        notification.success({message:'Modified successfully'})
        toRoute('/auth');
      }).catch((res)=>{
        notification.warning(res.data)
      })
    }

    const toSendCode=()=>{
      sendForgetPasswordMail(info.mail).then((res)=>{
        notification.success({message:'Sent successfully'})
      }).catch((res)=>{
        notification.warning(res.data)
      })
    }

    const toRoute = (path: string) => {
      router.push({
        path
      })
    }

    return {

      toFindPassword,
      info,
      toSendCode,
      toRoute

    }
  }
})
</script>

<style scoped lang="less">
.show-min-576px{
  @media screen and (max-width: 576px){
    display: none!important;
  }
}
.show-max-576px{
  @media screen and (min-width: 577px){
    display: none!important;
  }
}
</style>
